import QtQuick 2.0

Rectangle{
    x:600
    y:150
    width: 80
    height: 300
    color: "white"
    ListView{
        anchors.fill: parent
        anchors.margins: 20
        clip: true
        model: 100
        delegate: numberDelegate
        spacing: 5
        highlight:hightlightComponent
        focus: true
    }
    Component{
        id:hightlightComponent
        Item{
            width: ListView.view.width
            height: ListView.view.currentItem.height
            y:ListView.view.currentItem.y
            Behavior on y{
                SequentialAnimation{
                    PropertyAnimation{
                        target: hightlightComponent
                    }
                    NumberAnimation{
                        duration: 1
                    }
                    PropertyAnimation{
                        target: hightlightComponent
                    }
                }
            }
            Rectangle{
                id:highlightRectangle
                anchors.fill: parent
                color: "lightGreen"
            }
        }


//        Rectangle{
//            width: ListView.view.width
//            color:"lightGreen"
//        }
    }

    Component{
        id: numberDelegate
        Item{
            width: 40
            height: 40
            Text {
                anchors.centerIn: parent
                font.pixelSize: 10
                text: index
            }
        }
    }
}
